import React, { useEffect, useState, useRef } from 'react'
import { Cascader, Flex, Select, Input, DatePicker, Button, Rate, Tooltip, Spin, message } from 'antd'
import {
  getFinancingTrend,
  getFinancingDetailsPage,
  getMarketTrend,
  getMarketDetailsPage,
  getFinancingRoundsRequest
  // exportFinancingToLocal,
  // exportMarketToLocal
} from './service.ts'
import { useSearchParams } from 'react-router-dom'
import { Industrcollect, Industrdeletecollect, reqMapList_nodes } from '@hs-admin/api/sgapi'
import { getAreaOptions } from '@/hooks/useMonitors'
import { openCompanyDetail } from 'hs-react-company'
import { useImmer } from 'use-immer'
import styles from './index.module.less'
import { chartFontSize } from '@/utils/rem.ts'
import { EchartsModule, MonitorsList } from '@hs-server/components'
import { HsAdminTable } from '@hs-admin/base-components'
import { useESPage } from '@hs-admin/base-components'
import useUpdateEffect from '@/hooks/useUpdateEffect.ts'
import { judgeDataHasMonitors, judgeCompanyHasCollection } from '@/api/monitors'
import { addmonitorsitems, deletemonitors } from '@/api/home'
import { useExportCompanyListModal } from 'hs-react-company'

import dayjs from 'dayjs'

const source = 'industryWarning'
const { RangePicker } = DatePicker
const { Search } = Input
const CapitalTrends = (props) => {
  const { type } = props
  const [echartsLoading, setEchartsLoading] = useState(false)
  const [tableLoading, setTableLoading] = useState(false)
  const colors = ['#0779FF', '#52C51A']
  const timeOptions = [
    {
      value: 'PAST_MONTH',
      label: '近一月'
    },
    {
      value: 'PAST_YEAR',
      label: '近一年'
    },
    {
      value: 'PAST_FIVE_YEAR',
      label: '近五年'
    },
    {
      value: 'CUSTOM',
      label: ' 自定义'
    }
  ]
  const [searchParams] = useSearchParams()
  const monitorsRegion = useRef([])
  const mapId = useRef()
  const [trackValue, setTrackValue] = useState()
  const [areaValue, setAreaValue] = useState()
  const [timeTypeValue, setTimeTypeValue] = useState('PAST_YEAR')
  const [yearValue, setYearValue] = useState([])
  const [searchKey, setSearchKey] = useState()
  const [searchTime, setSearchTime] = useState([])
  const [financingTreeData, setFinancingTreeData] = useState()
  const [financingRoundValue, setFinancingRoundValue] = useState()
  const [lineData, setLineData] = useState([])
  const [priceData, setPriceData] = useState([])
  const [numData, setnumData] = useState([])
  const echartsRef: any = React.createRef()
  const [trackOptions, setTrackOptions] = useState([])
  const [areaOptions, setAreaOptions] = useImmer([])
  const [logData, setLogData] = useState([])
  const [totalNumber, settotalNumber] = useState(0)
  const { ESPage, pagination, resetPage, setPagination } = useESPage({ total: totalNumber, initPageSize: 50 })
  const conitorsListRef: any = useRef({})
  const monitorItem = useRef<any>({})

  // 导出
  const [requestParams, setrequestParams] = useState({})
  const { ExportModal, showModal } = useExportCompanyListModal({ requestParams, dataTotal: totalNumber })

  const categoryOption: any = {
    color: colors,
    grid: {
      top: chartFontSize(54),
      left: chartFontSize(50),
      right: chartFontSize(60),
      bottom: chartFontSize(90)
    },
    xAxis: {
      type: 'category',
      nameGap: chartFontSize(150),
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#999',
          opacity: 0.5
        }
      },
      data: lineData
    },
    yAxis: [
      {
        type: 'value',
        name: type == 'capital' ? '融资总额/亿元' : type == 'market' ? '中标金额/亿元' : '',
        nameGap: chartFontSize(30),
        nameTextStyle: {
          color: '#999',
          align: 'middle',
          padding: [0, 0, 0, 32]
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          },
          formatter: '{value}' //鼠标移动上去显示的数据
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999999',
            opacity: 0.5,
            type: 'dashed'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#B1BBC5',
            opacity: 0.3
          }
        }
      },
      {
        type: 'value',
        name: type == 'capital' ? '融资次数/次' : type == 'market' ? '中标项目数量/次' : '',
        position: 'right',
        nameGap: chartFontSize(30),
        nameTextStyle: {
          color: '#999',
          align: 'left',
          padding: [0, 0, 0, -70]
        },
        // min: 0,  //指定最小刻度
        // max: 6000,   //指定最大刻度
        axisLabel: {
          textStyle: {
            color: '#999'
          },
          formatter: '{value}'
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#999999',
            type: 'dashed',
            opacity: 0.5
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#B1BBC5',
            opacity: 0.3
          }
        }
      }
    ],

    legend: {
      show: true,
      bottom: chartFontSize(4),
      left: 'center',
      orient: 'horizontal',
      icon: 'circle',
      itemHeight: chartFontSize(10)
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line' // 默认为数据触发，可选为：'line'、'shadow'
      },
      formatter: function (params) {
        let result = params[0].name
        for (let i = 0, l = params.length; i < l; i++) {
          // 根据需要自定义格式
          result +=
            '<br/>' + params[i].seriesName + ' : ' + (Number(params[i].value) === 0 ? 0 : params[i].value) + (i == 0 ? '亿元' : i == 1 ? '次' : '')
        }
        return result
      }
    }
  }

  const seriesData: any = [
    {
      name: type == 'capital' ? '融资金额' : type == 'market' ? '中标金额' : '',
      type: 'line',
      stack: 'amount',
      data: priceData
    },
    {
      name: type == 'capital' ? '融资次数' : type == 'market' ? '中标次数' : '',
      type: 'line',
      yAxisIndex: 1,
      stack: 'count',
      data: numData
    }
  ]

  // const priceOption: any = {
  //   title: {
  //     text: '12%',
  //     subtext: '器械生产',
  //     left: '35%',
  //     top: '41%',
  //     textAlign: 'center',
  //     itemGap: 6,
  //     textStyle: {
  //       fontSize: chartFontSize(48),
  //       color: '#434343',
  //       fontFamily: 'MicrosoftYaHei'
  //     },
  //     subtextStyle: {
  //       fontSize: chartFontSize(19),
  //       color: '#595959',
  //       fontFamily: 'MicrosoftYaHei'
  //     }
  //   },
  //   tooltip: {
  //     trigger: 'item',
  //     // formatter:function (parms){
  //     //   var str=  parms.seriesName+"</br>"+
  //     //     parms.marker+""+parms.data.legendname+"</br>"+
  //     //     "数量："+ parms.data.value+"</br>"+
  //     //     "占比："+ parms.percent+"%";
  //     //     return  str ;
  //     // }
  //     formatter: '{b} : {d}% <br/> {c}'
  //   },
  //   legend: {
  //     orient: 'vertical',
  //     icon: 'circle',
  //     align: 'left',
  //     top: 'middle',
  //     left: '70%',
  //     textStyle: {
  //       color: '#595959'
  //     },
  //     height: 250
  //     // data: ['五保', '低保', '残疾', '失独', '重点优抚', '突出贡献']
  //   }
  // }

  // const seriesData2: any = [
  //   {
  //     type: 'pie',
  //     radius: ['40%', '50%'],
  //     center: ['35%', '50%'],
  //     color: ['#754DEC', '#EDA105', '#87E8DE', '#0AA9FF', '#246AFF', '#4AEAB0'],
  //     itemStyle: {
  //       normal: {
  //         label: {
  //           show: false
  //         },
  //         labelLine: {
  //           show: false
  //         }
  //       }
  //     },
  //     data: [
  //       {
  //         value: 335,
  //         name: '五保'
  //       },
  //       {
  //         value: 310,
  //         name: '低保'
  //       },
  //       {
  //         value: 234,
  //         name: '残疾'
  //       },
  //       {
  //         value: 235,
  //         name: '失独'
  //       },
  //       {
  //         value: 254,
  //         name: '重点优抚'
  //       },
  //       {
  //         value: 174,
  //         name: '突出贡献'
  //       }
  //     ]
  //   }
  // ]

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 70,
      render: (_, record, index) => {
        return index * 1 + 1
      }
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      width: 240,
      ellipsis: true,
      render: (_name: any, row: any) => (
        <Button type="link" onClick={() => openCompanyDetail(row.companyCode, source)}>
          {row.companyName}
        </Button>
      )
    },
    {
      title: '细分领域',
      dataIndex: 'hsIndListStr',
      width: 150
    },
    {
      title: '地区',
      dataIndex: 'areaCombine',
      width: 200
    },
    {
      title: '融资时间',
      dataIndex: 'financingDate',
      width: 120
    },
    {
      title: '融资轮次',
      dataIndex: 'financingRound',
      width: 100
    },
    {
      title: '融资金额',
      dataIndex: 'financingAmtCalStr',
      width: 100
    },
    {
      title: '投资方',
      dataIndex: 'investCompanyName',
      flex: 1
      // ellipsis: true
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 100,
      render: (_name: any, record: any) => {
        return (
          <Flex align="center" gap={'middle'}>
            <Tooltip placement="topLeft" title={record.is_favorite ? '取消收藏' : '收藏'}>
              <Rate count={1} value={record.is_favorite ? 1 : 0} onChange={() => ChangeRate(record)} />
            </Tooltip>
            {!record.ismonitor && (
              <div onClick={() => addmonitorsitem(null, record)}>
                <Flex align="center">
                  <img src="/static/img/BiomedicalArea/add.png" alt="" className="w-22px align cursor-pointer" />
                </Flex>
              </div>
            )}
            {record.ismonitor && (
              <div onClick={() => addmonitorsitem(record.companyId, record)}>
                <Flex align="center">
                  <img src="/static/img/BiomedicalArea/has-add.png" alt="" className="w-22px cursor-pointer" />
                </Flex>
              </div>
            )}
          </Flex>
        )
      }
    }
  ]

  const marketColumns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: '70px',
      render: (_, record, index) => {
        return index * 1 + 1
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 160
    },
    {
      title: '公司名称',
      dataIndex: 'companyName',
      width: 200
    },
    {
      title: '细分领域',
      dataIndex: 'hsIndListStr',
      width: 150
    },
    {
      title: '地区',
      dataIndex: 'areaCombine',
      width: 200
    },
    {
      title: '发布时间',
      dataIndex: 'pubDate',
      width: 180
    },
    {
      title: '中标金额',
      dataIndex: 'offerAmtStr'
    },
    {
      title: '招标方',
      dataIndex: 'buyer'
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 100,
      render: (_name: any, record: any) => {
        return (
          <Flex align="center" gap={'middle'}>
            <Tooltip placement="topLeft" title={record.is_favorite ? '取消收藏' : '收藏'}>
              <Rate count={1} value={record.is_favorite ? 1 : 0} onChange={() => ChangeRate(record)} />
            </Tooltip>
            {!record.ismonitor && (
              <div onClick={() => addmonitorsitem(null, record)}>
                <img src="/static/img/BiomedicalArea/add.png" alt="" className="w-22px cursor-pointer" />
              </div>
            )}
            {record.ismonitor && (
              <div onClick={() => addmonitorsitem(record.companyCode, record)}>
                <img src="/static/img/BiomedicalArea/has-add.png" alt="" className="w-22px cursor-pointer" />
              </div>
            )}
          </Flex>
        )
      }
    }
  ]

  // 细分赛道
  const getTrackList = async (mapId) => {
    const treeList = await reqMapList_nodes({
      id: mapId
    })
    if (treeList?.length) {
      setTrackOptions(treeList)
    }
  }

  // 融资轮次
  const getFinancingRoundsList = async () => {
    const _data = await getFinancingRoundsRequest({})
    setFinancingTreeData(_data)
  }

  const formatterValue = () => {
    let provinceCode, cityCode, areaCode
    if (monitorsRegion.current?.length) {
      const _length = monitorsRegion.current.length
      switch (_length) {
        case 1:
          provinceCode = monitorsRegion.current[0].value
          cityCode = null
          areaCode = null
          break
        case 2:
          provinceCode = monitorsRegion.current[0].value
          cityCode = monitorsRegion.current[1].value
          areaCode = null
          break
        case 3:
          provinceCode = monitorsRegion.current[0].value
          cityCode = monitorsRegion.current[1].value
          areaCode = monitorsRegion.current[2].value
          break
        default:
          break
      }
    }
    const _params = {
      mapId: mapId.current,
      hsIndStr: trackValue ? trackValue : null,
      provinceCode,
      areaCode,
      cityCode,
      dateRangeEnum: timeTypeValue ? timeTypeValue : null,
      yearRange:
        yearValue.length && timeTypeValue == 'CUSTOM'
          ? yearValue.map((item) => {
              return item.format('YYYY')
            })
          : null
    }

    return _params
  }

  // 资本趋势
  const getFinancingTrendDetail = async () => {
    try {
      setEchartsLoading(true)
      const _params = formatterValue()
      const data = await getFinancingTrend(_params)
      const _xArray = data.map((item) => {
        return item.label
      })
      const _priceData = data.map((item) => {
        return Number(item.amount).toFixed(2)
      })
      const _numData = data.map((item) => {
        return item.count
      })
      setEchartsLoading(false)
      setLineData(_xArray)
      setPriceData(_priceData)
      setnumData(_numData)
    } catch (error) {
      setEchartsLoading(false)
    }
  }

  // 融资事件明细
  const getFinancingDetailsPageRequest = async () => {
    try {
      setTableLoading(true)
      const _searchTime = searchTime?.map((item) => {
        return dayjs(item).format('YYYY-MM-DD')
      })

      let _params = formatterValue()
      _params = {
        ..._params,
        ...{
          searchKey: searchKey,
          financeYearRange: _searchTime,
          financingRoundCode: financingRoundValue,
          pageNum: pagination.current,
          pageSize: pagination.pageSize
        }
      }
      setrequestParams(_params)
      const result = await getFinancingDetailsPage(_params)

      settotalNumber(result.total || 0)
      setLogData(result.list)

      const data_ids = result.list.map((item: { companyId: any }) => item.companyId)

      // const data_codes = result.list.map((item: { companyCode: any }) => item.companyCode)
      // 监测
      judgeDataHasMonitors({ data_ids }).then((res2) => {
        result.list = result.list.map((item: { companyId: string | number; ismonitor: boolean }) => {
          if (res2[item.companyId]) {
            item.ismonitor = true
          } else {
            item.ismonitor = false
          }
          return item
        })
        setLogData([...result.list])
      })

      // 收藏
      judgeCompanyHasCollection({ data_ids }).then((res2) => {
        result.list = result.list.map((item: { companyId: string | number; is_favorite: boolean }) => {
          if (res2[item.companyId]) {
            item.is_favorite = true
          } else {
            item.is_favorite = false
          }
          return item
        })
        setLogData([...result.list])
      })
      setTableLoading(false)
    } catch {
      setTableLoading(false)
    }
  }

  // 市场趋势
  const getMarketTrendDetail = async () => {
    try {
      setEchartsLoading(true)
      const _params = formatterValue()
      const data = await getMarketTrend(_params)
      const _xArray = data.map((item) => {
        return item.label
      })
      const _priceData = data.map((item) => {
        return Number(item.amount).toFixed(2)
      })
      const _numData = data.map((item) => {
        return item.count
      })
      setEchartsLoading(false)
      setLineData(_xArray)
      setPriceData(_priceData)
      setnumData(_numData)
    } catch (error) {
      setEchartsLoading(false)
    }
  }

  // 市场中标事件明细
  const getMarketDetailsPageRequest = async () => {
    try {
      setTableLoading(true)
      const _searchTime = searchTime?.map((item) => {
        return dayjs(item).format('YYYY-MM-DD')
      })

      let _params = formatterValue()
      _params = {
        ..._params,
        ...{
          searchKey: searchKey,
          financeYearRange: _searchTime,
          financingRoundCode: financingRoundValue,
          pageNum: pagination.current,
          pageSize: pagination.pageSize
        }
      }
      setrequestParams(_params)
      const result = await getMarketDetailsPage(_params)

      settotalNumber(result.total || 0)
      setLogData(result.list)

      const data_ids = result.list.map((item: { companyCode: any }) => item.companyCode)

      // 监测
      judgeDataHasMonitors({ data_ids }).then((res2) => {
        result.list = result.list.map((item: { companyCode: string | number; ismonitor: boolean }) => {
          if (res2[item.companyCode]) {
            item.ismonitor = true
          } else {
            item.ismonitor = false
          }
          return item
        })
        setLogData([...result.list])
      })

      // 收藏
      judgeCompanyHasCollection({ data_ids }).then((res2) => {
        result.list = result.list.map((item: { companyCode: string | number; is_favorite: boolean }) => {
          if (res2[item.companyCode]) {
            item.is_favorite = true
          } else {
            item.is_favorite = false
          }
          return item
        })
        setLogData([...result.list])
      })
      setTableLoading(false)
    } catch {
      setTableLoading(false)
    }
  }

  // 调用所有事件
  const requestAllRequest = () => {
    if (type == 'capital') {
      // 资本
      getFinancingTrendDetail()
      getFinancingDetailsPageRequest()
    } else if (type == 'market') {
      // 市场
      getMarketTrendDetail()
      getMarketDetailsPageRequest()
    }
  }

  // 只调用趋势
  const requestTrendDetail = () => {
    if (type == 'capital') {
      // 资本
      getFinancingTrendDetail()
    } else if (type == 'market') {
      // 市场
      getMarketTrendDetail()
    }
  }

  // 只调用事件明细
  const requestDetailsPage = () => {
    if (type == 'capital') {
      // 资本
      getFinancingDetailsPageRequest()
    } else if (type == 'market') {
      // 市场
      getMarketDetailsPageRequest()
    }
  }

  //收藏 取消收藏
  const ChangeRate = (value: any) => {
    let params: any = null

    let iscollect: any = Industrcollect

    let mess: any = null

    if (!value.is_favorite) {
      params = {
        company_ids: [value.companyId]
      }
      mess = '收藏成功'
    } else {
      params = value.companyId
      iscollect = Industrdeletecollect

      mess = '取消收藏'
    }

    iscollect(params).then((_res: any) => {
      message.success(mess)
      setPagination({ ...pagination })
    })
  }

  // 监测
  const addmonitorsitem = (companyId: string | null, record: any) => {
    monitorItem.current = record
    conitorsListRef.current.showModal(companyId)
  }

  const delemonitors = (id: string) => {
    return deletemonitors({ data_id: monitorItem.current.companyId, list_id: id }).then(() => {
      monitorItem.current = {}
      message.success('已取消监测')
      resetPage()
    })
  }

  const callAddmonitorsitem = (id: any) => {
    if (!monitorItem.current.ismonitor) {
      return addmonitors_items(id)
    } else {
      delemonitors(id)
    }
  }
  const addmonitors_items = (id: any) => {
    return addmonitorsitems({ data_id: monitorItem.current.companyId, list_id: id, data_name: monitorItem.current.companyName }).then(() => {
      monitorItem.current = {}
      message.success('监测成功，在监测模块查看')
      resetPage()
    })
  }

  useUpdateEffect(() => {
    if (timeTypeValue != 'CUSTOM') {
      setYearValue([])
      resetPage()
      requestTrendDetail()
    }
  }, [timeTypeValue])

  useUpdateEffect(() => {
    if (timeTypeValue == 'CUSTOM') {
      // if (pagination.current !== 1) {
      //   resetPage()
      // }
      resetPage()
      requestTrendDetail()
    }
  }, [yearValue])

  useUpdateEffect(() => {
    requestDetailsPage()
  }, [pagination])

  useUpdateEffect(() => {
    resetPage()
  }, [searchKey, searchTime, financingRoundValue])

  // 列表
  useEffect(() => {
    if (searchParams.get('map_id')) {
      mapId.current = searchParams.get('map_id')
    }

    // 获取细分赛道枚举
    getTrackList(mapId.current)

    // 设置省市区
    setAreaOptions((prev) => {
      prev = getAreaOptions()
      return prev
    })

    requestAllRequest()

    // 获取融资轮次
    if (type == 'capital') {
      getFinancingRoundsList()
    }
  }, [])

  return (
    <div className={styles.capitalTrends}>
      <Flex align="center" className={styles.topSearchWrap}>
        <Flex align="center" className={styles.mr}>
          <span>细分赛道:</span>
          <Cascader
            className={styles.cascader}
            showSearch={true}
            options={trackOptions}
            placeholder="请选择细分赛道"
            fieldNames={{
              label: 'node_name',
              value: 'node_code',
              children: 'children'
            }}
            changeOnSelect
            value={trackValue}
            onChange={(value) => {
              setTrackValue(value)
              if (!value) {
                resetPage()
                requestTrendDetail()
              }
            }}
            onDropdownVisibleChange={(val) => {
              if (!val) {
                resetPage()
                requestTrendDetail()
              }
            }}
          />
        </Flex>
        <Flex align="center" className={styles.mr}>
          <span>区域:</span>
          <Cascader
            showSearch={true}
            options={areaOptions}
            onChange={(value: any, row: any) => {
              setAreaValue(value)
              monitorsRegion.current = row
              if (!value) {
                resetPage()
                requestTrendDetail()
              }
            }}
            value={areaValue}
            placeholder="请选择区域"
            changeOnSelect
            onDropdownVisibleChange={(val) => {
              if (!val) {
                resetPage()
                requestTrendDetail()
              }
            }}
          />
        </Flex>
        <Flex align="center">
          <span>时间范围:</span>
          <Select allowClear placeholder="请选择时间范围" value={timeTypeValue} options={timeOptions} onChange={setTimeTypeValue} />
          {timeTypeValue == 'CUSTOM' && (
            <RangePicker allowClear picker="year" format="YYYY" placeholder="请选择" value={yearValue} onChange={setYearValue} />
          )}
        </Flex>
      </Flex>
      <Spin spinning={echartsLoading}>
        <div className={styles.midWrap}>
          <div className={styles.midLWrap}>
            <div className={styles.trendWrap}>
              <p className={styles.title}>
                <span className={styles.block}></span> {type == 'capital' ? '融资趋势' : type == 'market' ? '中标项目趋势' : ''}
              </p>
              <div className={styles.echartsWrap}>
                <EchartsModule
                  tyle={{ width: '100%', height: '600px' }}
                  autoPlay={false}
                  onRef={echartsRef}
                  options={categoryOption}
                  seriesData={seriesData}></EchartsModule>
              </div>
            </div>
            {/* 占比 */}
            {/* 先不做，页面完成 */}
            {/* <div className={styles.proportionWrap}>
            <p className={styles.title}>
              <span className={styles.block}></span>下级赛道融资占比
            </p>
            <Flex>
              <div className={styles.proportionPriceWrap}>
                <span className={styles.name}>按金额</span>
                <EchartsModule autoPlay={true} onRef={echartsRef} options={priceOption} seriesData={seriesData2}></EchartsModule>
              </div>
              <div className={styles.proportionNumberWrap}>
                <span className={styles.name}>按次数</span>
                <EchartsModule autoPlay={true} onRef={echartsRef} options={priceOption} seriesData={seriesData2}></EchartsModule>
              </div>
            </Flex>
          </div> */}
          </div>
          {/* 排名 */}
          {/* 先不做，页面完成 */}
          {/* <div className={styles.midRWrap}>
          <p className={styles.title}>
            <span className={styles.block}></span>中标企业排名
          </p>
          <div className={styles.subTitleWrap}>
            <span
              className={`${styles.subTitle} ${topIndex == 1 ? 'active' : ''}`}
              onClick={() => {
                setTopIndex(1)
              }}>
              按金额
            </span>
            <span
              className={`${styles.subTitle} ${topIndex == 2 ? 'active' : ''}`}
              onClick={() => {
                setTopIndex(2)
              }}>
              按次数
            </span>
          </div>
          <div className={styles.topWrap}>
            <ul className="ul-title">
              <li className="one">排名</li>
              <li className="two">企业名称</li>
              <li className="three">企业金额/亿元</li>
            </ul>
            <ul className="ul-main">
              <li className="one">1</li>
              <li className="two">企业名称</li>
              <li className="three">12亿元</li>
            </ul>
            <ul className="ul-main">
              <li className="one">1</li>
              <li className="two">企业名称</li>
              <li className="three">12亿元</li>
            </ul>
            <ul className="ul-main">
              <li className="one">1</li>
              <li className="two">企业名称</li>
              <li className="three">12亿元</li>
            </ul>
          </div>
        </div> */}
        </div>
      </Spin>
      <Spin spinning={tableLoading}>
        <div className={styles.tableWrap}>
          <p className={styles.title}>
            <span className={styles.block}></span>
            {type == 'capital' ? '融资事件明细' : type == 'market' ? '中标事件明细' : ''}
          </p>
          <div className="padding24">
            <Flex align="center" justify="space-between">
              <Flex className="search-wrap">
                <Search
                  className="search-input"
                  allowClear
                  placeholder={type == 'capital' ? '请输入公司名称、投资方名称' : type == 'market' ? '请输入标题、公司名称、投资方名称' : ''}
                  onSearch={(value) => {
                    setSearchKey(value)
                  }}
                  enterButton
                />
                <RangePicker
                  className="time-input showTime"
                  placeholder={type == 'capital' ? ['融资开始时间', '融资结束时间'] : type == 'market' ? ['发布开始时间', '发布结束时间'] : []}
                  value={searchTime}
                  onChange={setSearchTime}
                />

                {type == 'capital' ? (
                  <Select
                    className="finance-input"
                    allowClear
                    placeholder="请选择融资轮次"
                    value={financingRoundValue}
                    options={financingTreeData}
                    onChange={setFinancingRoundValue}
                    fieldNames={{
                      label: 'value',
                      value: 'value'
                    }}
                  />
                ) : (
                  <></>
                )}
              </Flex>
              <Button
                type="link"
                shape="round"
                onClick={() => {
                  // if (type == 'capital') {
                  //   exportFinancingToLocal(requestParams, '融资事件明细')
                  // } else if (type == 'market') {
                  //   exportMarketToLocal(requestParams, '中标事件明细')
                  // }
                  showModal()
                }}>
                <Flex align="center">
                  <img src="/static/img/BiomedicalArea/download.png" alt="" className="w-16px mr-2" />
                  导出
                </Flex>
              </Button>
            </Flex>
            <HsAdminTable
              className="table"
              rowKey={(record, index) => index.toString()}
              id="Table"
              size="middle"
              resizeable={false}
              columns={type == 'capital' ? columns : type == 'market' ? marketColumns : []}
              dataSource={logData}
              pagination={false}
              scroll={{
                x: '1500px'
              }}
            />
            <Flex justify="flex-end">{ESPage}</Flex>
          </div>
        </div>
      </Spin>
      <MonitorsList ref={conitorsListRef} addmonitorsitem={callAddmonitorsitem} />
      {ExportModal}
    </div>
  )
}

export default CapitalTrends
